<template>
	<view>
		<view class="card">
			<u-icon name="coupon" style="font-size: 70rpx; margin: -120rpx 0 0 40rpx;"></u-icon>
			<view class="text u-line-1">{{cardData.bank_name}}</view>
			<view class="num">{{cardData.bank_number}}</view>
			<view class="buttons">
				<u-button size="mini" class="button" style="right: 120rpx ; bottom: 20rpx ;" @click="editHandle">编辑
				</u-button>
				<u-button size="mini" class="button" @click="delectHandle">删除</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cardData: Object
		},
		data() {
			return {}
		},
		onLoad() {
			console.log(this.cardData)
		},

		methods: {
			// 编辑
			editHandle() {
				// this.$u.route('/pages/center/addCard/addCard', {
				// 	id: this.cardData.id,
				// 	bank_name: this.cardData.bank_name,
				// 	bank_deposit_name: this.cardData.bank_deposit_name,
				// 	bank_number: this.cardData.bank_number
				// })
				this.$Router.push({
					path: "/addCard",
					query: {
						id: this.cardData.id,
						bank_name: this.cardData.bank_name,
						bank_deposit_name: this.cardData.bank_deposit_name,
						bank_number: this.cardData.bank_number
					}
				})
			},
			// 删除
			delectHandle() {
				this.$u.api.delectBankCard({
					id: this.cardData.id
				}).then(res => {
					if (res.code == 1) {
						this.$u.toast("删除成功！")
						this.$emit("initData")
					} else {
						this.$u.toast("删除失败！")

					}
				})
			}
		}
	}
</script>


<style scoped lang="scss">
	.card {
		color: #FFFFFF;
		position: relative;
		display: flex;
		width: 650rpx;
		height: 240rpx;
		background-image: linear-gradient(45deg, rgb(250, 120, 106), rgb(252, 90, 101));
		border-radius: 15rpx;
		margin: 15rpx auto;
	}

	.text {
		margin: 30rpx;
		font-size: 34rpx;
	}

	.num {
		position: absolute;
		left: 130rpx;
		top: 80rpx;
	}

	.button {
		background-color: unset;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
		color: white;
		margin: 5rpx;
	}
</style>
